<template>
  <div class="login-container">
    <h4 class="header">
      登录
    </h4>


    <div class="login">
      <label for="user">账号<input type="text" id="user" placeholder="请输入账号" v-model="account"></label>
      <hr>
      <label for="pass">密码<input type="password" id="pass" placeholder="请输入密码" v-model="password"></label>
    </div>
    <div class="submit">
      <mt-button type="primary" size="large" class="sunbmit" @click="login()">登录</mt-button>
    </div>
    <p class="reg-box">
      <router-link to="/user/reg">注册账号</router-link>
      <span>|</span>
      <a href="">忘记密码</a>
    </p>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      account:'',
      password:''
    }
  },
  methods:{
    async login(){
      let data = await this.ajax.get(`/api/login?account=${this.account}&password=${this.password}`)
      if(data.err==0){
        Toast(data.data.msg)
        this.$store.dispatch("setUser",data.data)
        this.$router.push('/')
      }else{
        Toast(data.data)
      }
    }
  }
}
</script>


<style lang="less" scoped>
.login-container{

  .header{
    background-color: #DDD;
    text-align: center;
    line-height: 60px;
    margin:0 0 30px 0;
  }
  .login{
    background-color: #DDD;
    padding-left: 15px;
    margin-bottom:40px;
    label{
      display: flex;
      align-items: center;
      line-height: 50px;
      white-space: nowrap;
      input{
        margin: 0;
        background-color: #DDD;
        border: none;
        color: blue;
      }
      input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
          box-shadow: 0 0 0px 1000px #DDD inset
      }
    }
  }
  .submit{
    padding: 10px;
  }
  .reg-box{
    text-align: center;
    padding: 20px;
  }
}
</style>